<template>
    <div>
      <el-form  style="display: flex; justify-content: flex-start; margin: 10px 0" :inline="true"  class="demo-form-inline">
          <el-form-item label="名称">
            <el-input v-model="pname" placeholder="名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" circle @click="queryAllProject()"
              ></el-button
            >
          </el-form-item>
        </el-form>
      <el-button  style="display: flex; justify-content: flex-start; margin: 10px 0" type="primary"
      @click="dialogFormVisible = true;project={};sign='add';title1='新增检查项'"
      >新增</el-button>
      <el-table :data="projectList" @selection-change="handleSelectionChange" height="65vh">
        <el-table-column prop="pid" type="selection">
        </el-table-column>
        <el-table-column prop="pid" label="编号">
        </el-table-column>
        <el-table-column prop="pname" label="项目名称" >
        </el-table-column>
        <el-table-column prop="brief" label="简介" >
        </el-table-column>
        <el-table-column prop="pid" label="操作">
          <template slot-scope="scope">
            <el-button 
            @click="
                dialogFormVisible = true;
                sign = 'update';
                project = scope.row;
               title1='修改检查项目组信息';
               queryJcxByPid()
              "
            type="primary" icon="el-icon-edit" circle>
            </el-button>
            <el-button   @click="DeleteJcx(scope.row.pid)" type="danger" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 3, 4, 6, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
  
      <el-dialog :title="title1"  :visible.sync="dialogFormVisible">
        <el-tabs type="border-card">
            <el-tab-pane label="基本信息">
                <el-form :model="project">
          <el-form-item label="项目名称" :label-width="formLabelWidth">
            <el-input v-model="project.pname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="项目说明" :label-width="formLabelWidth">
            <el-input v-model="project.brief" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
            </el-tab-pane>
            <!-- 添加检查项 --> 
            <el-tab-pane label="添加检查项">
                <div style="text-align: center">
    <el-transfer
      style="text-align: left; display: inline-block"
      v-model="value"
      filterable
 
      :left-default-checked="[]"
      :right-default-checked="[]"
      :render-content="renderFunc"
      :titles="['选有项', '已选项']"
      :button-texts="['', '']"
      :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }"
      @change="handleChange"
      :data="data">
    </el-transfer>
  </div>
            </el-tab-pane>
        </el-tabs>
        
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="
              dialogFormVisible = false;
              add();
            "
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </template>



  
  <script>
  export default {
  data () {
      return {
        jcxs:[],
        data: [],
        value: [],
        renderFunc(h, option) {
          return <span>{ option.key } - { option.label }</span>;
        },
          pname:"",
          sign:"add",
          project:{},
          title1:"",
          projectList:[],
        dialogTableVisible: false,
        dialogFormVisible: false,
        currentPage: 1,
        total: 3,
        pageSize: 4,
        formLabelWidth: "120px",
      }
  },created () {
    this.queryAllProject();  
    this.queryJcx();
  },
  methods: {
    handleChange(value, direction, movedKeys) {
        console.log(value, direction, movedKeys);
    },
    generateData () {
        var data1 = [];
        var jcx =this.jcxs;
        jcx.forEach((c, index) => {
          data1.push({
            label: c.jcxname,
            key: c.id,
          });
        });
       this.data=data1;
      },
       queryJcx(){
    this.axios.post("/api/lzh/queryAllJcxx").then(result=>{
               this.jcxs= result.data;
               this.generateData();
          })
  },
    queryAllProject(){
          this.axios.post("/api/lzh/queryAllProject",{
              pageNum: this.currentPage,
              pageSize: this.pageSize,
              searchObj: {
                  pname: this.pname,
              },
          }).then(result=>{
              this.total = result.data.total;
               this.projectList = result.data.list;
          })
      },
      queryJcxByPid(){
        this.axios.post("/api/lzh/queryJcxByPid?pid="+this.project.pid)
          .then((result) => {
           console.log(result.data)
           this.value.length=0;
            this.data.map(item=>{
              result.data.forEach(i=>{
                console.log(item.key)
                console.log(i)
                if(item.key==i.id){
                  this.value.push(item.key);
                }
              })
            })
            console.log(this.value)
          })
      },
      add(){
          if(this.sign=="add"){
         console.log(this.value);
        this.axios.post("/api/lzh/addProject", {
            obj:this.project,
            vlues:this.value
            }).then((result) => {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.queryAllProject();
        });
        }else{
        this.axios.post("/api/lzh/updateProject", {
            obj:this.project,
            vlues:this.value
        }).then((result) => {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.queryAllProject();
        });
        }
      },
      DeleteJcx(data){
  
      },
      handleSelectionChange(val) {
      // console.log(val)
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.queryAllProject();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.queryAllProject();
      // console.log(`当前页: ${val}`);
    },
  }
  }
  </script>
  
  <style>
  
  </style>